<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业4:轮播图Jquery实现</title>
    <link rel="stylesheet" href="../css/slider.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <h1 class="text-muted">轮播图</h1>
        </div>
        <div id="slider">
            <ul class="slides">
                <li class="slide"><img src="../img/图1.png" /></li>
                <li class="slide"><img src="../img/图2.png" /></li>
                <li class="slide"><img src="../img/图3.png" /></li>
            </ul>
        </div>
    </div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function () {
            var width = 400;
            var time = 1000;
            var parse = 3000;
            var currentSlide = 1;

            var $slider = $('#slider')
            var $sliderContainer = $slider.find('.slides')
            var $slides = $sliderContainer.find('.slide')

            var interval;
            function startInterval() {
                interval = setInterval(function () {
                    // 模块内容向左滑动width的长度
                    // animate() 方法执行 CSS 属性集的自定义动画。
                    // 该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
                    // 只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
                    // 提示：请使用 "+=" 或 "-=" 来创建相对动画。
                    $sliderContainer.animate({ 'margin-left': '-=' + width }, time, function () {
                        currentSlide++
                        if (currentSlide === $slides.length) {
                            currentSlide = 1;
                            $sliderContainer.css('margin-left', 0)
                        }
                    });
                }, parse)
            }
            function stopInterval() {
                clearInterval(interval);
            }
            //mouseenter 鼠标滑入事件
            //mouseleave 鼠标滑出事件
            $slider.on('mouseenter', stopInterval).on('mouseleave', startInterval);
            startInterval();
        })
    </script>
</body>

</html>